<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我是专家</title>
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				height: 100%;
				overflow: hidden;
			}
			
			.mui-search:before {
				font-family: Muiicons;
				font-size: 24px;
				font-weight: 400;
				position: absolute;
				top: 50%;
				right: 50%;
				display: none;
				margin-top: -18px;
				margin-right: 35px;
				content: url(img/expert-index/sousuo_03.png)
			}
		</style>
	</head>

	<body>

		<nav id="nav_dbdh" class="mui-bar mui-bar-tab" style="background: url(img/index/bottom-box_02.png); height: 90px;">
			<a id="nv-recent-contacts" class="mui-tab-item mui-active" href="#ep-zjlxr">
				<span id="sp-ep-rcs" class="mui-icon" style="background: url(img/expert-index/zuijinlianxiren-lanse_03.png) no-repeat; height: 46px; width: 46px;"></span>
				<span class="mui-tab-label" style="font-size: 26px; padding-top: 5px; margin-left: -14px;">最近联系人</span>
			</a>

			<!--<a id="nv-ep-contacts" class="mui-tab-item" href="#ep-txl">
				<span id="sp-ep-cs" class="mui-icon" style="background: url(img/expert-index/tongxunlu-hui_05.png) no-repeat; height: 46px; width: 46px;"></span>
				<span class="mui-tab-label" style="font-size: 22px; padding-top: 5px; margin-left: -10px;">通讯录</span>
			</a>-->

			<a id="nv-ep-my" class="mui-tab-item" href="#ep-wd">
				&nbsp;&nbsp;<span id="sp-ep-me" class="mui-icon" style="background: url(img/expert-index/wode-hui_08.png) no-repeat; height: 46px; width: 46px;"></span>
				<span class="mui-tab-label" style="font-size: 26px; padding-top: 5px; margin-left: -12px;">我的</span>
			</a>
		</nav>

		<script>
			/**
			 * 监听底部导航事件，用于更改其背景图标
			 */
			document.getElementById("nv-recent-contacts").addEventListener("tap", function() {
				document.title = "最近联系人";
				document.getElementById("sp-ep-rcs").style.background = "url(img/expert-index/zuijinlianxiren-lanse_03.png) no-repeat";
				//document.getElementById("sp-ep-cs").style.background = "url(img/expert-index/tongxunlu-hui_05.png) no-repeat";
				document.getElementById("sp-ep-me").style.background = "url(img/expert-index/wode-hui_08.png) no-repeat";
			});

			/*document.getElementById("nv-ep-contacts").addEventListener("tap", function() {
				document.title = "通讯录";
				document.getElementById("sp-ep-rcs").style.background = "url(img/expert-index/zuijinlianxiren-huise_03.png) no-repeat";
				document.getElementById("sp-ep-cs").style.background = "url(img/expert-index/tongxunlu-lanse_05.png) no-repeat";
				document.getElementById("sp-ep-me").style.background = "url(img/expert-index/wode-hui_08.png) no-repeat";
			});*/

			document.getElementById("nv-ep-my").addEventListener("tap", function() {
				document.title = "我的";
				document.getElementById("sp-ep-rcs").style.background = "url(img/expert-index/zuijinlianxiren-huise_03.png) no-repeat";
				//document.getElementById("sp-ep-cs").style.background = "url(img/expert-index/tongxunlu-hui_05.png) no-repeat";
				document.getElementById("sp-ep-me").style.background = "url(img/expert-index/wode-lan_08.png) no-repeat";
			});
		</script>

		<div class="mui-content">
			<!--
            	作者：xuzhao_deng@sina.com
            	时间：2016-12-01
            	描述：首页内容
            -->
			<div id="ep-zjlxr" class="mui-control-content mui-active" style="width: 100%; font-size: 24px;">
				<br />
				<!--
                	作者：xuzhao_deng@sina.com
                	时间：2016-12-15
                	描述：mui-input-row  mui-search
                -->
				<div id="dv-serach" class="" style="width: 100%; height: 70px; background: url(img/expert-index/sousuokuang_03.png);">
					<input type="search" placeholder="Search" style="height: 70px; background-color: white; font-size: 32px;" />
				</div>
				<br />

				<div>
					<div id="dv_home_content_bor" style="width: 100%;">
						<!--
                        	作者：xuzhao_deng@sina.com
                        	时间：2016-12-09
                        	描述：家长问题列表
                        -->
						<div id="rfc-rclst" class="mui-scroll-wrapper" style="height: 820px; top: 100px;">
							<div class="mui-scroll">
								<ul id="recentContactslst" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
									
								</ul>
							</div>
						</div>

					</div>

				</div>
			</div>
			<!--
            	作者：xuzhao_deng@sina.com
            	时间：2016-12-01
            	描述：通讯录
            -->
			<div id="ep-txl" class="mui-control-content">

			</div>

			<!--
            	作者：xuzhao_deng@sina.com
            	时间：2016-12-14
            	描述：专家个人中心
            -->
			<div id="ep-wd" class="mui-control-content" style="font-size: 19px;">
				<div id="dv-zj-bg">
					<img src="img/expert-index/bg.png" style="width: 100%; height: 300px;" />
				</div>
				<div style="margin: -70px 0px 0px 30px;">
					<img src="img/expert-index/touxiang_04.png" style="margin: 0px 0px 0px, 0px; width: 150px; height: 150px;" />
					<img id="expIcon" style="width: 150px; height: 150px; margin: 0px 0px 0px -150px;" />
					<div style="margin: -115px 0px 0px 170px; font-family: '微软雅黑';">
						<span id="iptExpUserName" style="color: white; font-size: 36px"></span><br /><br /><br />
						<span style="font-size: 30px">edu</span>
					</div>
				</div><br /><br /><br />
				<div id="dv-ep-my-data" style="margin: 0px 0px 0px 30px; line-height: 130%;">
					<span id="expZzzs">
						
					</span>
					<hr />
					<span id="expZxal">
						
					</span>
					<hr />
					<span id="expZxsc"></span>
					<hr />
					<span id="expScfx"></span>
					<hr />
					<span id="expGrjj">
						</span>
				</div><br />
				<!--<div id="dv-ep-rec-lst" style="margin: 0px 0px 0px 30px;">
					<span>相关推荐:</span><br /><br />
					<div>
						<ul class="mui-table-view mui-table-view-chevron" id="dv-nologin-home-content">
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" style="display: flex;">
									<img src="img/jzkt/cbd.jpg" style="height: 110px; width: 110px;">
									<div class="mui-media-body"><br />
										<span style="font-size: 26px;">&nbsp;&nbsp;好文标题2</span><br /><br />
										<p style="font-size: 22px;" class='mui-ellipsis'>&nbsp;&nbsp;推荐人:赵敏 &nbsp;&nbsp;&nbsp;&nbsp;发布时间：2016.12.08</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" style="display: flex;">
									<img src="img/jzkt/cbd.jpg" style="height: 110px; width: 110px;">
									<div class="mui-media-body"><br />
										<span style="font-size: 26px;">&nbsp;&nbsp;好文标题3</span><br /><br />
										<p style="font-size: 22px;" class='mui-ellipsis'>&nbsp;&nbsp;推荐人:小龙女 &nbsp;&nbsp;&nbsp;&nbsp;发布时间：2016.12.08</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" style="display: flex;">
									<img src="img/jzkt/cbd.jpg" style="height: 110px; width: 110px;">
									<div class="mui-media-body"><br />
										<span style="font-size: 26px;">&nbsp;&nbsp;好文标题4</span><br /><br />
										<p style="font-size: 22px;" class='mui-ellipsis'>&nbsp;&nbsp;推荐人:黄蓉 &nbsp;&nbsp;&nbsp;&nbsp;发布时间：2016.12.08</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" style="display: flex;">
									<img src="img/jzkt/cbd.jpg" style="height: 110px; width: 110px;">
									<div class="mui-media-body"><br />
										<span style="font-size: 26px;">&nbsp;&nbsp;好文标题5</span><br /><br /><br />
										<p style="font-size: 22px;" class='mui-ellipsis'>&nbsp;&nbsp;推荐人:幕姑娘 &nbsp;&nbsp;&nbsp;&nbsp;发布时间：2016.12.08</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" style="display: flex;">
									<img src="img/jzkt/cbd.jpg" style="height: 110px; width: 110px;">
									<div class="mui-media-body"><br />
										<span style="font-size: 26px;">&nbsp;&nbsp;好文标题5</span><br /><br /><br />
										<p style="font-size: 22px;" class='mui-ellipsis'>&nbsp;&nbsp;推荐人:幕姑娘 &nbsp;&nbsp;&nbsp;&nbsp;发布时间：2016.12.08</p>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>-->
			</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/utils/http.utils.js"></script>
		<script>
		var $loginUser = JSON.parse(localStorage.getItem("login-user-expert"));
			mui.init({
				pullRefresh : {
				    container:"#rfc-rclst",
				    down : {
				      height:50,
				      auto: true,
				      contentdown : "下拉可以刷新",
				      contentover : "释放立即刷新",
				      contentrefresh : "正在刷新...",
				      callback :fun_rfcloadlst 
				    }
				}
			});
			
			var $cupage = 0;
			
			function fun_rfcloadlst() {
			    fun_loadRecentContactsData(8, $cupage);
			    mui('#rfc-rclst').pullRefresh().endPulldownToRefresh();
			}
			//窗体加载
			var $loginUser;
			var $userId = $loginUser.userId;
			window.onload = function() {
				//$loginUser = JSON.parse(localStorage.getItem("login-user-expert"));
				//$userId = $loginUser.userid;
				console.log($loginUser);
				fun_loadExportInfo();
				if($loginUser.nickName != null && $loginUser.nickName != "") {
					document.getElementById("iptExpUserName").innerHTML = $loginUser.nickName +"";
				} else {
					document.getElementById("iptExpUserName").innerHTML = $loginUser.nickName + "";
				}
			}
			
			mui("#recentContactslst").on("tap", "a", function(){
				mui.openWindow({
					url : this.href
				});
			});
			
			function fun_loadExportInfo(){
				mui.ajax({
					url : $request_url.getConsultantDetail,
					type : "get",
					dataType : "json",
					headers: {
						"Authorization": $headers_authorization
					},
					data : {
						userId : $userId
					},
					success : function(dat){
						if(dat.code == 0){
							console.log(dat.result)
							document.getElementById("expIcon").src = "img/expert-index/myicon.png";
							document.getElementById("expZzzs").innerHTML = '<p style="font-size: 34px;">资质证书：'+ dat.result.certificate +'</p>';
							document.getElementById("expZxal").innerHTML = '<p style="font-size: 34px;">咨询案例：'+ dat.result.consultPersonNum +'次</p>';
							document.getElementById("expZxsc").innerHTML = '<p style="font-size: 34px;">咨询时长：'+ dat.result.consultHourNum +'小时</p>';
							document.getElementById("expScfx").innerHTML = '<p style="font-size: 34px; line-height: 130%;">擅长方向：'+ dat.result.speciality +'</p>';
							document.getElementById("expGrjj").innerHTML = '<p style="font-size: 34px; line-height: 130%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">个人简介：'+ dat.result.description +'</p>';
						} else {
							mui.toast(dat.message);
						}
					}, error : function(err){
						mui.toast("......");
					}
				});
			}
			
			function fun_loadRecentContactsData($psize, $cpage){
				mui.ajax({
					url : $request_url.getRecentContactsLst,
					type : "get",
					dataType : "json",
					headers: {
						"Authorization": $headers_authorization
					},
					data : {
						expertid : $userId,
						rows : $psize,
						page : $cpage
					},
					success : function(dat){
						if(dat.code == 0){
							var $rcArray = dat.result;
							var $rcdoc = document.getElementById("recentContactslst");
							for(var i = 0; i < $rcArray.length; i ++){
								var $rcInfo = $rcArray[i];
								var div =document.createElement('li');
								div.innerHTML = fun_getRecentContactsLstTem($rcInfo, i);
								$rcdoc.appendChild(div);
							}
							$cupage ++;
						} else {
							mui.toast(dat.message);
						}
					}, error : function(err){
						mui.toast("......");
					}
				});
			}
			
			function fun_getRecentContactsLstTem($rec, $i){
				var $recConTemHtml = 
					'<li class="mui-table-view-cell" style="display: flex;">'
				+		'<a href="html/expert/troubleshooting.html?jzuid='+ $rec.userId +'&jzname='+ $rec.userTrueName +'" style="display: flex;">'
				+			'<img src="'+ $rec.faceImage +'" style="height: 90px; width: 90px;">'
				+			'<div class="mui-table" style="margin-left: 20px;">'
				+				'<div class="mui-table-cell mui-col-xs-10">'
				+					'<h4 class="mui-ellipsis" style="font-size: 34px;">'+ $rec.userTrueName +'</h4><br />'
				+					'<span class="mui-h6 mui-ellipsis" style="font-size: 30px;">'+ $rec.chatContent +'</span>'
				+				'</div>'
				+				'<div class="mui-table-cell mui-col-xs-2">'
				+					'<span style="margin-left: -260px; font-size: 30px;" class="mui-h5">'+ $rec.sendTime +'</span>'
				+				'</div>'
				+			'</div>'
				+		'</a>'
				+	'</li>';
				return $recConTemHtml;
			}
		</script>
	</body>
</html>